<template>
    <div class="addressEdit">
        <div class="content">
            <nut-form :model-value="formData" ref="ruleForm">
                <nut-form-item 
                    label="署名" 
                    label-width="20px" 
                    label-align="left" 
                    class="edit-item"
                    prop="addressName"
                    :rules="[{ required: true, message: '请填写署名(单字/二字/四字各一)' }]"
                    required>
                    <nut-input v-model="formData.addressName" placeholder="(单字/二字/四字各一)" :border="false" />
                </nut-form-item>
                <nut-form-item 
                    label="联系方式" 
                    label-width="20px" 
                    label-align="left" 
                    class="edit-item"
                    prop="addressContact"
                    :rules="[{ required: true, message: '请填写联系方式(可数字可英文)' }]"
                    required>
                    <nut-input v-model="formData.addressContact" placeholder="可数字可英文" :border="false" />
                </nut-form-item>
                <nut-form-item 
                    label="发货方式" 
                    label-width="20px" 
                    label-align="left" 
                    class="edit-item"
                    required>
                    <nut-radio-group direction="horizontal" v-model="formData.harvestType">
                        <nut-radio label="1">QQ</nut-radio>
                        <nut-radio label="2">微信</nut-radio>
                        <nut-radio label="3">QQ邮箱</nut-radio>
                    </nut-radio-group>
                </nut-form-item>
                <nut-form-item 
                    label="发货地址" 
                    label-width="20px" 
                    label-align="left" 
                    class="edit-item"
                    prop="harvestAddress"
                    :rules="[{ required: true, message: '请填写QQ/微信/邮箱' }]"
                    required>
                    <nut-input v-model="formData.harvestAddress" placeholder="请输入QQ/微信/邮箱" :border="false" />
                </nut-form-item>
                <nut-form-item 
                    label="备注" 
                    label-width="20px" 
                    label-align="left" 
                    class="edit-item"
                    prop="remark"
                    :rules="[{ required: true, message: '请填写备注' }]"
                    required>
                    <nut-textarea  
                        v-model="formData.remark" 
                        limit-show 
                        max-length="50"
                        placeholder="请输入备注" 
                        type="text" />
                </nut-form-item>
                <nut-form-item  
                    label-width="20px" 
                    label-align="left" 
                    class="edit-setDefault">
                    <nut-checkbox v-model="isDef" label="复选框">设置默认信息</nut-checkbox>
                </nut-form-item>
            </nut-form>
        </div>
        <div class="address-save">
            <div class="address-save-content">
                <nut-button type="info" shape="square" class="confirm-opera" @click="SubmitAddress">{{type == 1 ? '新 建' : '保 存'}}</nut-button>
            </div>
        </div>
    </div>
  </template>
  
  <script>
  import { reactive, toRefs, isReactive,ref, onMounted } from 'vue';
  import './index.scss';
  import { AddAddress, } from '../utils/api.js';
  import { Edit, Checklist } from '@nutui/icons-vue-taro';
  import Taro from '@tarojs/taro'
  import { eventCenter, getCurrentInstance } from '@tarojs/taro'
  import currency from 'currency.js'
  export default {
    name: 'Index',
    components: {
        Edit,Checklist
    },
    setup(){
        const formData = reactive({
            addressName: '',
            addressContact: '',
            harvestType: '1',
            harvestAddress: '',
            remark: ''
        });
        const validate = (item) => {
            console.log(item);
        };
        const ruleForm = ref(null);
        const state = reactive({  
            type: Taro.getCurrentInstance().router?.params.type,
            editData: Taro.getCurrentInstance().router?.params.editData ? JSON.parse(Taro.getCurrentInstance().router?.params.editData) : '',
            isDef: true, // 是否默认
        });
        onMounted(() => {
            console.log(state.type, '____')
            if(state.type == 2) {
                formData.addressName = state.editData.name;
                formData.addressContact = state.editData.link;
                formData.harvestType = state.editData.type;
                formData.harvestAddress = state.editData.address;
                formData.remark = state.editData.remark;
                state.isDef = state.editData.isdef == 1 ? true : false;
            }
        })
        const SelectTarAddress = (tar,tarIdx) => {
            state.addressList.forEach((i,idx) => {
                i.checkFlag = idx == tarIdx ? true: false;
            });
        }
        const SubmitAddress = () => {
                ruleForm.value.validate().then(({ valid, errors }) => {
                    if (valid) {
                        console.log('success', formData);
                        AddAddress({
                            id: state.type == 1 ? undefined : state.editData.id,
                            openid: Taro.getStorageSync('openId'),
                            isdef: state.isDef ? 1 : 0,
                            name: formData.addressName,
                            link: formData.addressContact,
                            type: formData.harvestType,
                            address: formData.harvestAddress,
                            remark: formData.remark,
                        }).then((res) => {
                            if(res.code == 200) {
                                Taro.navigateBack();
                            }
                        })
                    } else {
                        console.log('error submit!!', errors);
                    }
                })
        }
  
        return {
            formData,
            validate,
            ruleForm,
            SelectTarAddress,
            SubmitAddress,
            ...toRefs(state),
        }
    }
  }
  </script>
  
  